<template>
	<!-- 四图广告位 -->
	<view id="fourPicAd">
		<!-- 平铺 -->
		<!-- <view v-if="type== '0'">
			<view class="grid grid-square col-4">
				<view class="grid-pic-container" v-for="(item,index) in ads" :key="item.id" 
				 @tap="goUrl($event)" 
				 :data-url="item.url" 
				 :data-url_title="item.name" 
				 :style="'background-image:url('+item.pic+')'"
				 >
				</view>
			</view>
		</view> -->
		<!-- 一大三小 -->
		<!-- v-if="type== '1' && ads.length" -->
		<view >
			<view class="flex-container">
				<view class="left-container box" v-if="ads[0]" 
					:style="'background-image:url('+ads[0].pic+')'" 
					@tap="goUrl($event)"
					:data-url="ads[0].url" 
					:data-url_title="ads[0].name" 
					>
				</view>
				<view class="right-container">
					<view class="top-container box">
						<image  v-if="ads[1]" 
							:src="ads[1].pic" 
							mode="scaleToFill" 
							lazy-load="true"
							@tap="goUrl($event)"
							:data-url="ads[1].url" 
							:data-url_title="ads[1].name"
							></image>
					</view>
					<view class="bottom-container">
						<view class="b-left-container box">
							<image v-if="ads[2]" 
								:src="ads[2].pic" 
								mode="scaleToFill" 
								lazy-load="true"
								@tap="goUrl($event)"
								:data-url="ads[2].url" 
								:data-url_title="ads[2].name"
								></image>
						</view>
						<view class="b-right-container box" >
							<image v-if="ads[3]" 
								:src="ads[3].pic" 
								mode="scaleToFill" 
								lazy-load="true"
								@tap="goUrl($event)"
								:data-url="ads[3].url" 
								:data-url_title="ads[3].name"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'four-pic-adver',
		props:{
			type: String,
			ads: Array,
		},
		data() {
			return{}
		},
		mounted() {
		},
		methods:{
			goUrl(e) {
				// console.log(e);
				this.$emit('goUrl',e)
			}
		}
	}
</script>
<style scoped>
	#fourPicAd {
		/* width: 100%; */
		margin: 0 20rpx;
	}
	
	.grid {
		display: flex;
		flex-wrap: wrap;
		padding-top: 10upx;
	}
	.grid.grid-square {
		position: relative;
		overflow: hidden;
	}
	.grid.grid-square>view {
		margin-right: 20upx;
		/* margin-bottom: 20upx; */
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}
	.grid.col-4.grid-square>view {
		padding-bottom: calc((100% - 60upx)/4);
		height: 0;
		width: calc((100% - 60upx)/4);
		/* height: 60px; */
	}
	.grid.col-4>view:nth-child(4n) {
		margin-right: 0;
	}
	.grid.col-4>view {
		width: 25%;
	}
	.grid-pic-container {
		background-color: #F7F7F7;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}
	image{
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}
	.image-desc-1 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		font-size: 12px;
		color: #333333;
	}
	.image-desc-1>text {
		/* height: 20px;
		line-height: 20px;
		vertical-align: middle; */
		margin-left: 20upx;
		
		display: block;
	}
	.title-1 {
		margin-top: 10upx;
	}
	.sub-title-1 {
		font-size: 10px;
		opacity: 0.8;
	}
	.flex-container {
		/* height: 120px; */
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-top: 20upx;
	}
	.flex-container>view {
		
		/* height: 100%; */
		/* border: red 1px solid; */
	}
	
	.box {
		border: 1upx solid #f7f7f7;
		background-color: #f7f7f7;
		border-radius: 5px;
		position: relative;
	}
	.left-container{
		/* flex: 1; */
		flex-basis: 40%;
		margin-right: 4px;
		height: 0;
		padding-bottom: 40%;
		/* background-image: url(https://picsum.photos/200/200); */
		background-size: 100% 100%;
		
	}
	.right-container{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.top-container{
		flex: 1;
		/* height: 58px; */
	}
	.bottom-container {
		flex: 1;
		/* height: 58px; */
		margin-top: 4px;
		display: flex;
		flex-direction: row;
	}
	.bottom-container>view{
		flex: 1;
	}
	.b-right-container{
		margin-left: 4px;
	}
</style>
